<template>
  <div>
    <!-- 头部盒子 -->
    <header>
      <div class="header-top">
        <span class="jiantou" @click="Return"></span>
        <p>{{ title }}</p>
      </div>
      <div class="classify">
        <p :class="[bool ? '' : 'blue']" @click="classify">
          {{ fenlei }}
          <span :class="[bool ? 'xiaoheijiantou' : 'xiaolanjiantou']"></span>
        </p>
        <p @click="classify1" :class="[bool1 ? '' : 'blue']">
          排序
          <span
            :class="[bool1 ? 'xiaoheijiantou' : 'xiaolanjiantou']"
            class="xiaoheijiantou"
          ></span>
        </p>
        <p @click="classify2" :class="[bool2 ? '' : 'blue']">
          筛选
          <span
            :class="[bool2 ? 'xiaoheijiantou' : 'xiaolanjiantou']"
            class="xiaoheijiantou"
          ></span>
        </p>
      </div>
    </header>
    <main>
      <transition name="fadee">
        <div class="box1" v-if="bool == false">
          <div class="left">
            <div
              :class="[index1 == index ? 'color-white' : 'left-nav']"
              @click="ce(value, index)"
              v-for="(value, index) in arr"
              :key="index"
            >
              <p>
                 <img
                  v-if="value.image_url[value.image_url.length - 2] == 'n'"
                  :src="value.image_url | classifyImg"
                  alt=""
                />
                 <img
                  v-if="value.image_url[value.image_url.length - 2] == 'e'"
                  :src="value.image_url | classifyJpeg"
                  alt=""
                />
                 <img
                  v-if="value.image_url == ''"
                  src="//elm.cangdu.org/img/default.jpg"
                  alt=""
                />
                {{ value.name }}
              </p>
              <p>
                {{ value.count }}
              </p>
            </div>
          </div>
          <div class="right">
            <div
              :class="[index2 == index ? 'lan' : 'leixing']"
              @click="lan(value, index)"
              v-for="(value, index) in arrNew3"
              :key="index"
            >
              {{ value.name }}
            </div>
          </div>
        </div>
      </transition>
      <transition name="fadee">
        <div class="box1 fen" v-if="bool1 == false">
          <p @click="fen1">
            <svg class="img" viewBox="0 0 33 32" id="default">
              <path
                fill="#3b87c8"
                d="M13.374 29.064a.94.94 0 0 1-.941-.941V6.476l-7.285 6.899a.942.942 0 0 1-1.299-1.364l8.876-8.424a.94.94 0 0 1 1.59.681v23.855a.94.94 0 0 1-.941.941zM20.904 29.355h-.008a.94.94 0 0 1-.375-.078.943.943 0 0 1-.559-.86V3.944a.94.94 0 1 1 1.882 0v22.287l7.238-6.842a.94.94 0 0 1 1.289 1.366l-8.818 8.338a.943.943 0 0 1-.649.264z"
              ></path>
            </svg>
            <span>智能排序</span>
          </p>
          <p @click="fen2">
            <img :src="lujing1" alt="" />
            <span>
              <svg class="img" viewBox="0 0 32 32" id="distance">
                <path
                  fill="#2a9bd3"
                  d="M15.884 31.236l-.042.001a.888.888 0 0 1-.59-.224l-7.91-7.91a7.548 7.548 0 0 1-.498-.471 12.752 12.752 0 0 1-3.747-9.045C3.097 6.523 8.824.796 15.888.796s12.791 5.727 12.791 12.791c0 3.532-1.432 6.73-3.747 9.045-.196.196-.409.391-.613.578l-7.813 7.804a.886.886 0 0 1-.589.223l-.035-.001zm0-28.667C9.818 2.59 4.908 7.513 4.908 13.582c0 3.023 1.218 5.762 3.19 7.752l.461.435 7.316 7.316 7.2-7.2q.284-.249.551-.516a10.977 10.977 0 0 0 3.225-7.787c0-6.066-4.905-10.987-10.965-11.013z"
                ></path>
                <path
                  fill="#2a9bd3"
                  d="M15.884 18.524a5.707 5.707 0 0 1-4.07-1.732l-.001-.001a5.76 5.76 0 1 1 4.119 1.734h-.05zm-2.817-2.942a3.982 3.982 0 1 0 0-5.626c-.726.717-1.175 1.713-1.175 2.813s.449 2.096 1.175 2.813z"
                ></path></svg
              >距离最近
            </span>
          </p>
          <p @click="fen3">
            <img :src="lujing1" alt="" />
            <span>
              <svg class="img" viewBox="0 0 23 32" id="hot">
                <path
                  fill="#f07373"
                  d="M9.859 29.375c-3.489-.771-6.362-3.097-7.187-5.551-.882-2.623-1.029-6.873-.238-9.318l-1.727.037.001.002.001.004.004.01.011.029.038.091c.039.09.086.191.142.3.155.304.349.627.586.955a7.477 7.477 0 0 0 2.711 2.318c.583.153.583.153 1.087-.188.187-.263.187-.263.224-.39.028-.094.041-.176.05-.28.01-.109.016-.238.022-.47.063-2.219.162-3.38.562-4.943a10.05 10.05 0 0 1 .814-2.185c1.433-2.723 4.843-6.053 6.699-7.021l-1.325-.962c-.064.382-.127.992-.131 1.722-.008 1.252.169 2.393.616 3.329.261.547.525.968 1.132 1.862l.23.339c.86 1.281 1.161 1.986 1.069 2.653l-.009.125c.069.517.069.517.781.906.451-.026.451-.026.578-.104.144-.093.144-.093.19-.136.041-.037.079-.077.123-.125.068-.076.153-.178.245-.295.22-.279.458-.615.677-.963.648-1.028 1.045-1.988 1.037-2.845l-.914.009-.706.581c.295.358.809 1.075 1.33 1.936.826 1.363 1.492 2.791 1.898 4.209 1.1 3.845.3 9.288-2.245 11.75a9.652 9.652 0 0 1-1.659 1.29 10.232 10.232 0 0 1-3.471 1.332c-.794.151-1.385.191-2.064.191h-.009a2.75 2.75 0 0 1-.373-.03 6.007 6.007 0 0 1-.585-.115 7.765 7.765 0 0 1-.536-.15l-.578 1.735a9.182 9.182 0 0 0 1.445.341c.221.031.43.048.627.048h.009a12.546 12.546 0 0 0 2.407-.224 12.011 12.011 0 0 0 4.088-1.572c.699-.431 1.358-.94 1.971-1.533 3.098-2.998 4-9.132 2.731-13.567-.455-1.591-1.188-3.161-2.092-4.653-.569-.939-1.134-1.727-1.482-2.15l-1.645-1.998.024 2.588c.004.412-.281 1.1-.756 1.853a9.64 9.64 0 0 1-.569.809 4.528 4.528 0 0 1-.158.195c.028-.027.028-.027.16-.113.122-.075.122-.075.57-.101.71.388.71.388.778.902h-.914l.906.125c.174-1.262-.261-2.281-1.362-3.922l-.235-.347c-.554-.817-.787-1.189-.995-1.624-.306-.642-.444-1.53-.438-2.53a10.566 10.566 0 0 1 .107-1.431L14.44.304l-1.628.85c-2.18 1.138-5.862 4.733-7.471 7.791a11.873 11.873 0 0 0-.967 2.583 19.2 19.2 0 0 0-.511 3.147c-.036.423-.061.839-.079 1.273-.011.281-.019.531-.029.924-.005.191-.01.298-.015.354a.403.403 0 0 1 .019-.077c.027-.099.027-.099.203-.346.492-.332.492-.332 1.112-.157a5.745 5.745 0 0 1-2.54-2.496 3.456 3.456 0 0 1-.093-.197l-.018-.044-.002-.006v.001l.001.002v.002l-.915-2.473-.812 2.51c-.917 2.836-.757 7.485.245 10.463 1.042 3.099 4.442 5.852 8.526 6.754l.395-1.785z"
                ></path></svg
              >销量最高
            </span>
          </p>
          <p @click="fen4">
            <img :src="lujing1" alt="" />
            <span>
              <svg class="img" viewBox="0 0 32 32" id="price">
                <path
                  fill="#e6b61a"
                  d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"
                ></path>
                <path
                  fill="#e6b61a"
                  d="M23.14 6.06l-5.12 8.65h4.48v1.54h-5.49v2.43h5.49v1.54h-5.49v5.1h-2.02v-5.1H9.53v-1.54h5.46v-2.43H9.53v-1.54h4.45L8.8 6.06h2.24l4.99 8.48 4.93-8.48h2.18z"
                ></path></svg
              >起送价最低
            </span>
          </p>
          <p @click="fen5">
            <img :src="lujing1" alt="" />
            <span
              ><svg class="img" viewBox="0 0 32 32" id="speed">
                <path
                  fill="#37c7b7"
                  d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"
                ></path>
                <path
                  fill="#37c7b7"
                  d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"
                ></path>
              </svg>
              配送速度最快
            </span>
          </p>
          <p @click="fen6">
            <img :src="lujing1" alt="" />
            <span>
              <svg class="img" viewBox="0 0 33 32" id="rating">
                <path
                  fill="#eba53b"
                  d="M27.087 31.84L16.8 25.553 6.504 31.84l2.824-11.727-9.186-7.878 12.019-.941L16.801.16l4.631 11.134 12.019.941-9.158 7.849zM16.8 23.369l7.407 4.527-2.014-8.471 6.588-5.647-8.659-.696L16.8 5.063l-3.341 8.019-8.659.696 6.588 5.647-2.014 8.471z"
                ></path></svg
              >评分最高
            </span>
          </p>
        </div>
      </transition>
      <transition name="fadee">
        <div class="box1 shaixuan" v-if="bool2 == false">
          <p class="peisong">
            配送方式
            <span
              @click="fengniao(value)"
              class="fengniao"
              v-bind:style="{
                color: '#' + value.color,
              }"
              v-for="(value, index) in aarr"
              :key="index"
            >
              {{ value.text }}
            </span>
          </p>
          <p class="shuxing">
            <span class="teshu"> 商家属性(可以多选) </span>

            <span
              @click="huoqu(value, index)"
              v-for="(value, index) in arrNeww"
              :key="index"
            >
              <b
                v-if="value.__v == 0"
                v-bind:style="{
                  color: '#' + value.icon_color,
                  borderColor: '#' + value.icon_color,
                }"
              >
                {{ value.icon_name }}
              </b>
              <b v-else> 对</b>
              {{ value.name }}
            </span>
          </p>
          <div class="shaixuanhei">
            <button @click="qingkong" class="qingkong">清空</button>
            <button @click="tijiao" class="queding">{{ length }}</button>
          </div>
        </div>
      </transition>
      <transition name="fadee"> 
        <div
          class="black"
          v-if="bool == false || bool1 == false || bool2 == false"
        ></div>
      </transition>
    </main>
    <footer>
      <shop :arrNew="arrNew" :srcc="srcc"> </shop>
    </footer>
  </div>
</template>
<style scoped>
.fengniao {
  display: block;
}
.teshu {
  float: left;
  width: 100% !important;
  height: 0.6rem;
  line-height: 0.6rem;
  border: 0px solid #000 !important;
}
.shuxing {
  line-height: 0.2rem;
  height: 3rem !important;
}
.shuxing span {
  float: left;
  height: 0.6rem;
  width: 30%;
  text-align: center;
  line-height: 0.6rem;
  border: 1px solid #eee;
  margin-right: 0.06rem;
  margin-bottom: 0.06rem;
}
.shuxing span b {
  float: left;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid #000;
  text-align: center;
  border-radius: 4px;
  vertical-align: top;
  margin-right: 0.1rem;
  line-height: 0.4rem;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
}
.qingkong {
  background: #fff;
  width: 48%;
  height: 1rem;
  border-radius: 4px;
}
.queding {
  width: 48%;
  background: #56d176;
  height: 1rem;
  border-radius: 4px;
  color: #fff;
}
.shaixuanhei {
  width: 100%;
  height: 2rem;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
  box-sizing: border-box;
}
.shaixuan {
  font-size: 0.24rem;
}
.shaixuan p {
  width: 100%;
  height: 1rem;
  box-sizing: border-box;
  padding-left: 0.4rem;
}
.peisong {
  line-height: 0.4rem;
}
.img {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.3rem;
  vertical-align: bottom;
}
.fen {
  font-size: 0.26rem;
}
.fen p {
  width: 100%;
  height: 1rem;
  display: flex;
  text-align: center;
  padding-left: 0.6rem;
  padding-top: 0.3rem;
  box-sizing: border-box;
}
.lan {
  color: #3190e8;
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}
.leixing {
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}
.box1 .left {
  float: left;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  background: #fff;
  font-size: 0.2rem;
  padding: 0.3rem 0.3rem;
  box-sizing: border-box;
  background: #f6f6f6;
}
.left img {
  width: 0.3rem;
  height: 0.3rem;
  vertical-align: middle;
  margin-right: 0.2rem;
}
.left-nav {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  align-items: center;
}
.color-white {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  background: #fff;
  align-items: center;
}
.right {
  float: left;
  width: 50%;
  height: 100%;
  overflow: auto;
  font-size: 0.2rem;
  background: #fff;
}
.black {
  width: 100%;
  height: 6rem;
  background: rgba(0, 0, 0, 0.3);
}
* {
  margin: 0;
  padding: 0;
}
header {
  position: fixed;
  z-index: 1990;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background-color: #3190e8;
}
header div {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
  height: 1rem;
  color: #fff;
  box-sizing: border-box;
}
.header-top {
  font-weight: 700;
}
.jiantou {
  width: 0.24rem;
  height: 0.24rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.06rem 0.06rem 0px 0px;
  transform: rotateZ(225deg);
}
.classify {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.8rem;
  font-size: 0.24rem;
  transition: all 0.6s linear;
}
.classify p {
  position: relative;
}
.blue {
  color: blue;
}
.fadee-enter {
  opacity: 0.1;
  /* background-color: green; */
}
.fadee-enter-active {
  transition: all 0.3s linear;
}
.fadee-enter-to {
  opacity: 0.7;
  /* background-color: red; */
}
.fadee-leave {
  opacity: 0.9;
  /* background-color: red; */
  font-size: 50px;
}
.fadee-leave-active {
  transition: all 0.3s linear;
}
.fadee-leave-to {
  opacity: 0.1;
  /* background-color: palegreen; */
  font-size: 10px;
}
main {
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 3000;
  top: 2rem;
  left: 0;
}
.box1 {
  width: 100%;
  height: 6rem;
  background: #fff;
  transition: all s linear;
}
footer {
  margin-top: 2.2rem;
}
.xiaoheijiantou {
  position: absolute;
  top: 0.16rem;
  right: -0.3rem;
  width: 0px;
  height: 0px;
  border: 0.1rem solid #000;
  border-color: #000 transparent transparent transparent;
  transition: all 0.2s linear;
}
.xiaolanjiantou {
  position: absolute;
  top: 0rem;
  right: -0.3rem;
  width: 0px;
  height: 0px;
  border: 0.1rem solid #000;
  border-color: blue transparent transparent transparent;
  transform: rotateZ(-180deg);
  transition: transform 0.2s linear;
}
</style>
<script>
import shop from "./shop.vue";
import {
  pageNumber,
  getfenlei,
  pageNumberr,
  pageFenlei,
  getshaixuan,
  getfengniao,
  gettijiao,
} from "../../api/index.js";
import glq from "../../utils/filter.js";
export default {
  components: {
    shop,
  },
  data() {
    return {
      arrNew: [],
      srcc: "https://elm.cangdu.org/img/",
      src: "https://fuss10.elemecdn.com/",
      pageNumber: 0,
      Number: 10,
      latitude: "",
      longitude: "",
      region: "",
      fenlei: "商朝便利",
      bool: true,
      bool1: true,
      bool2: true,
      arr: [],
      n: ".png",
      e: "jpeg",
      index: 0,
      arrNew3: [],
      index1: 0,
      index2: 0,
      n: 0,
      id1: "",
      id: "",
      lujing1: "http://www.w3.org/1999/xlink",
      title: "",
      show: true,
      styleobj: {
        border: "1px solid black",
        width: "100px",
        height: "100px",
      },
      arrNeww: [],
      aarr: [],
      arrr: [],
      by: "",
      boool: true,
      index6: "",
      length: "确定",
      arrrr: "",
    };
  },
  methods: {
    /* 返回 */
    Return() {
      this.$router.go(-1);
    },
    /* 第一个三角 */
    classify() {
      this.bool = !this.bool;
      if (this.bool == false) {
        this.fenlei = "分类";
        this.bool1 = true;
        this.bool2 = true;
      } else {
        this.fenlei = this.title;
      }
    },
    /* 第二个三角 */
    classify1() {
      this.bool1 = !this.bool1;
      if (this.bool1 == false) {
        this.bool = true;
        this.bool2 = true;
        this.fenlei = this.title;
      }
    },
    /* 第三个三角 */
    classify2() {
      this.bool2 = !this.bool2;
      if (this.bool2 == false) {
        this.bool1 = true;
        this.bool = true;
        this.fenlei = this.title;
      } else {
      }
    },
    /* 修改内容 */
    ce(value, index) {
      this.index1 = index;
      this.index = index;
      this.id1 = value.id;
      if (this.arr) {
        this.arrNew3 = this.arr[index];
        console.log(this.arrNew3);
        this.arrNew3 = this.arrNew3.sub_categories;
      }

      console.log(this.arrNew);
    },
    /* 点击变蓝 */
    async lan(value, index) {
      this.index2 = index;
      console.log(value.id);
      this.id1 = value.id;
      var region6 = await pageNumberr(this.id1);
      if (region6.data) {
        console.log(region6);
        this.arrNew = region6.data;
      }
      this.title = value.name;
      this.fenlei = value.name;
      // setTimeout(() => {
      this.bool = true;
      // }, 1000);
    },
    /* 提交 */
    async tijiao() {
      console.log(this.id1);
      console.log(this.by);
      console.log(this.arrrr);
      var rrreg = await gettijiao(this.id1, this.by, this.arrrr);
      if (rrreg.data) {
        console.log(rrreg);
        this.arrNew = rrreg.data;
        this.bool2 = true;
      }
    },
    /* 第一个筛选 */
    async fen1() {
      console.log(this.id1);
      this.by = 0;
      var res10 = await pageFenlei(this.id1, 0);
      if (res10.data) {
        this.arrNew = res10.data;
      }
      this.boo1 = true;
    },
    /* 第二个筛选 */
    async fen2() {
      this.by = 5;
      var res11 = await pageFenlei(this.id1, 5);
      if (res11.data) {
        this.arrNew = res11.data;
      }
      this.boo1 = true;
    },
    /* 第三个筛选 */
    async fen3() {
      this.by = 6;
      var res12 = await pageFenlei(this.id1, 6);
      if (res12.data) {
        this.arrNew = res12.data;
      }
      this.boo1 = true;
    },
    /* 第四个筛选 */
    async fen4() {
      this.by = 2;
      var res13 = await pageFenlei(this.id1, 2);
      if (res13.data) {
        this.arrNew = res13.data;
      }
      this.boo1 = true;
    },
    /* 第五个筛选 */
    async fen5() {
      this.by = 1;
      var res14 = await pageFenlei(this.id1, 1);
      if (res14.data) {
        this.arrNew = res14.data;
      }
      this.boo1 = true;
    },
    /* 第六个筛选 */
    async fen6() {
      this.by = 3;
      var res15 = await pageFenlei(this.id1, 3);
      if (res15.data) {
        this.arrNew = res15.data;
      }
      this.boo1 = true;
    },
    /* 获取 */
    huoqu(value, index) {
      if (value.__v == 0) {
        value.__v++;
      } else {
        value.__v--;
      }
      if (this.arrr.indexOf(value.id) == -1) {
        if (value.__v > 0) {
          this.arrr.push(value.id);
        }
      }
      if (value.__v == 0) {
        this.arrr.splice(this.arrr.indexOf(value.id), 1);
      }
      this.length = this.arrr.length + "提交";
      this.arrrr = this.arrr.join();
      if (this.arrrr.length == 1) {
        this.arrrr = "delivery_mode[]=null&support_ids[]=" + this.arrrr;
      }
      this.arrrr = this.arrrr.replaceAll(",", "&support_ids[]=");
      console.log(this.arrrr);
    },
    /* 清空 */
    qingkong() {
      this.arrr = [];
      this.length = "提交";
    },
    /* 蜂鸟判断 */
    fengniao(value) {
      this.n++;
      if (this.n % 2 == 0) {
      } else {
        if (this.arrr.indexOf(value.id)) {
          this.arrr.splice(0, 0, "&delivery_mode[]=" + value.id);
          this.length = this.arrr.length + "提交";
        } else {
          this.arrr.splice(0, 0, "delivery_mode[]=" + "null");
          this.length = this.arrr.length + "提交";
        }
      }
      this.arrrr = this.arrr.join();
      this.arrrr = this.arrrr.replaceAll(",", "&support_ids[]=");
      // console.log(this.arrrr);
    },
  },
  async mounted() {
    this.title = this.$route.query.title;
    this.fenlei = this.$route.query.title;
    /* 获得分类 */
    var reg = await getfenlei(this.latitude, this.longitude);
    if (reg.data) {
      this.arr = reg.data;
    }
    /* 蜂鸟专送 */
    var regq = await getfengniao();
    if (regq.data) {
      this.aarr = regq.data;
    }
    if (this.arr) {
      this.arrNew3 = this.arr[this.index];
      this.arrNew3 = this.arrNew3.sub_categories;
    }
    this.latitude = this.$route.query.latitude;
    this.longitude = this.$route.query.longitude;
    /* 获得全部商品 */
    var region4 = await pageNumber(
      this.latitude,
      this.longitude,
      this.pageNumber,
      this.Number
    );
    if (region4.data) {
      this.arrNew = this.arrNew.concat(region4.data);
    }
    /* 筛选 */
    var rega = await getshaixuan();
    if (rega.data) {
      this.arrNeww = rega.data;
    }
    /* 滑动添加 */
    window.addEventListener("scroll", async () => {
      if (
        document.documentElement.scrollTop + window.innerHeight >=
        document.body.offsetHeight + 94
      ) {
        this.pageNumber += 10;
        var reg = await pageNumber(
          this.latitude,
          this.longitude,
          this.pageNumber,
          this.Number
        );
        if (reg.data) {
          this.arrNew = this.arrNew.concat(reg.data);
        }
      }
    });
  },
};  
</script>
